<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>项目跟踪-新增/修改</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--插件样式-->
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=86e2297f1">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=222aea35">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_855021_84xsjuczn2a.css">

    <style type="text/css">
        .layout{
            text-align: center;
        }
        table{
            margin: 0px auto;
            border: 0;
            width: 750px;
        }

        table td{
            height: 35px;
            line-height: 35px;
            position: relative !important;
            padding: 0 5px
        }

        table td input{
            color: #2a8cec;
        }
        table td textarea{
            color: #2a8cec;
            width: 100%;
            line-height: 15px;
            outline: none;
            border: 0;
            vertical-align: middle;
            overflow: hidden;
            resize: none;
        }
        table .col-title{
            text-align: center;
            background-color:yellow;
            border:1px solid #333
        }
        table .col-content{
            border:1px solid #333;
        }

        table .col-content input{
            width: 100%;
            outline:none;
            border: 0;
            padding: 0 0px
        }

        table .row-op{
            text-align: right;border:0
        }

        table .row-op input{
            border: 1px solid #ccc;
            border-radius: 4px;
            color: #999;
            height: 20px;
            line-height: 16px;
            margin: 5px 0;
            background-color: #fff;
            outline: none;
        }
        .user{
            display: inline-block;
            float: left;
            overflow: hidden;
            cursor: pointer;
            color: #2a8cec;
            /* padding-left: 5px; */
        }
        .user.select{
            color: #fff;
            background-color: #045B9E;
        }

        .category-name td{
            padding: 0 10px;
            font-weight: bold;
        }

        .category-name td.t-right{
            text-align: right;
        }

        .category-name td input{
            height: 21px;
            line-height: 16px;
            border: 0;
            outline: none;
            margin-left: 6px;
            background-color: #fff;
            border-radius: 3px;
            color: #4796e5;
            width: 55px;
        }

        .icon-shousuoxiajiantou{
            font-size: 18px;
            line-height: 40px;
            display: inline-block;
            height: 30px;
            line-height: 26px;
            height: 25px;
            display: inline-block;
            width: 30px;
            cursor: pointer;
            border:1px solid #fff;
        }
        .icon-shousuoxiajiantou:hover{
            border: 1px solid #2a8cec;
            color: #2a8cec;
            border-radius: 4px;
        }
        .level2-name{
            text-align:center;cursor: pointer;
            color: #2a8cec;
        }
        .level2-name.selected{
            border:2px solid red;
        }
    </style>
</head>
<body>
<div class="layout" id="app">
    <table>
        <tr>
            <td class="col-title" colspan="2">一级项目</td>
            <td class="col-title" colspan="1">负责人(只能输入一个人)</td>
        </tr>
        <tr>
            <td class="col-content" colspan="2">
                <input id="level1Input" type="text" v-model="projectName" :value="projectName"  @change="itemChange()"/>
            </td>
            <td class="col-content" colspan="1">
                <div>
                    <div class="user" v-bind:class="{ select: selected }"
                        v-on:click="selectUser(item)">{{principalName}}
                    </div>
                    <input class="pull-left level1Principal" style="width:100px"
                        type="text" @keyup.delete="delLevel1Principal($event)" />
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="3" style="height:40px;text-align: center">
                <span class="iconfont icon-shousuoxiajiantou" @click="zkLevel2"></span>
            </td>
        </tr>
        <tr  v-if="showLevel2" class="category-name">
            <td colspan="3" style="padding-right:0px;">
                <span style="float:right;height: 25px;line-height: 25px;">
                    <input type="button" value="新增一行" @click="addRow"/>
                    <input type="button" value="删除一行" @click="delRow"/>
                </span>
            </td>
        </tr>

        <tr v-if="showLevel2">
            <td class="col-title" colspan="2">二级项目</td>
            <td class="col-title" colspan="1">负责人(只能输入一个人)</td>
        </tr>
        <tr v-if="showLevel2" v-for="item,i in levelProjectList">
            <td class="col-content" colspan="2">
                <input type="text" class="input2" v-model="item.projectName" @change="itemChange(item)" :value="item.projectName" @focus="focusInput2(i)"/>
            </td>
            <td class="col-content" colspan="1">
                <div id="principal">
                    <div class="user"
                        v-bind:class="{ select: item.selected }"
                        v-on:click="selectUser(item)">{{item.principalName}}
                    </div>
                    <input class="pull-left principal" :data-index="i" style="width:100px"
                        type="text" @keyup.delete="delPrincipal($event,item)" @blur="blurInput(item)"
                        @change="itemChange(item)" />
                </div>
            </td>
        </tr>
        <tr v-if="showLevel2">
            <td colspan="3" style="height:40px;text-align: center">
                <span @click="zkLevel3" class="iconfont icon-shousuoxiajiantou"></span>
            </td>
        </tr>
        <tr v-if="showLevel3" class="category-name">
            <td colspan="3" style="padding-right:0px;">
                <span style="float:right;height: 25px;line-height: 25px;">
                    <input type="button" value="新增一行" @click="addLevel3Row"/>
                    <input type="button" value="删除一行" @click="delLevel3Row"/>
                </span>
            </td>
        </tr>

        <tr v-if="showLevel3">
            <td class="col-title">二级项目</td>
            <td class="col-title">三级项目</td>
            <td class="col-title" colspan="1">负责人(只能输入一个人)</td>
        </tr>
        <template v-if="showLevel3" v-for="item,li in levelProjectList">
        <tr v-for="level3item,i in item.level3List">
            <td :class="'col-content  level2-name '+(li==selectedLevle2Index?'selected':'')" v-if="i==0" @click="selectProject(li)" 
            :rowspan="item.level3List.length">
                {{item.projectName}}
            </td>
            <td class="col-content">
                <textarea :class="'input3'+ li" v-model="level3item.projectName"
                :value="level3item.projectName" @change="itemChange(level3item)"  @focus="focusInput(li,i)"></textarea>
                <!-- <input type="text" :class="'input3'+ li" v-model="level3item.projectName"
                :value="level3item.projectName" @change="itemChange(level3item)"  @focus="focusInput(li,i)"/> -->
            </td>
            <td class="col-content" style="position:ralative">
                <div>
                    <div class="user"
                        v-bind:class="{ select: level3item.selected }"
                        v-on:click="selectUser(level3item)">
                        {{level3item.principalName}}
                    </div>
                    <input class="pull-left level3Principal" :data-liIndex="li" :data-index="i" style="width:100px"
                        type="text" @keyup.delete="delPrincipal($event,level3item)" @blur="blurInput(level3item)" @focus="focusInput(li,i)"/>
                </div>
            </td>
        </tr>
        </template>

    </table>
    <div class="south" style="height:50px;line-height:50px;text-align:center;">
        <input type="button" value="保存" class="btn oaBtn btn-sm" @click="save()"/>
    </div>
</div>
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=8e743a31"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=54c6b89c"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript">
    var api = frameElement.api, W = api.opener;
    var app = new Vue({
        el: "#app",
        data: {
            returnFlag:false,
            currentUser: getCurrentUser(),
            principalSelectedIdx:-1,
            selectedLevle2Index:0,
            focusLevle2Index:-1,
            focusLevle3Index:-1,
            showLevel2:false,
            showLevel3:false,
            delIds:"",
            id:"",
            projectName:"",
            principal:"",
            principalName:"",
            selected:false,
            changed:false,
            projectSn:"",
            levelProjectList:[
                {id:"",projectName:"", principal:"", principalName:"",selected:false,sortNo:0,changed:false,level3List:[
                        {id:"",projectName:"", principal:"", principalName:"",selected:false,sortNo:0,changed:false},
                        {id:"",projectName:"", principal:"", principalName:"",selected:false,sortNo:1,changed:false}
                    ]
                },
                {id:"",projectName:"", principal:"", principalName:"",selected:false,sortNo:1,changed:false,level3List:[
                        {id:"",projectName:"", principal:"", principalName:"",selected:false,sortNo:0,changed:false},
                        {id:"",projectName:"", principal:"", principalName:"",selected:false,sortNo:1,changed:false}
                    ]
                },
                {id:"",projectName:"", principal:"", principalName:"",selected:false,sortNo:2,changed:false,level3List:[
                        {id:"",projectName:"", principal:"", principalName:"",selected:false,sortNo:0,changed:false},
                        {id:"",projectName:"", principal:"", principalName:"",selected:false,sortNo:1,changed:false}
                    ]
                }
            ],
        },
        methods: {
            itemChange:function(item){
                if(item == undefined)
                    this.changed = true
                else
                    item.changed = true;
            },
            selectProject:function(index){
                this.selectedLevle2Index = index;
                this.focusLevle2Index = index;
            },
            zkLevel2:function(){
                this.showLevel2=true;
                setTimeout(function () {
                    initAutoComplete();
                    $(".level2Input").eq(0).focus();
                }, 300);
                
            },
            zkLevel3:function(){
                this.showLevel3=true;
                setTimeout(function () {
                    initAutoComplete();
                    $(".input30").eq(0).focus();
                }, 300);
            },
            selectUser: function (item) {
                if(item.selected)
                    item.selected = false;
                else
                    item.selected = true;
            },
            delPrincipal: function (event,item) {
                if (event.keyCode == 46 || event.keyCode == 8 && event.target.value == "") {
                    if (item.selected) {
                        item.principal="";
                        item.principalName="";
                    } else {
                        item.selected = true;
                    }
                }
            },
            blurInput(item){
                item.selected = false;
            },
            focusInput(level2Index, level3Index){
                this.selectedLevle2Index = level2Index;
                this.focusLevle2Index = level2Index;
                this.focusLevle3Index = level3Index;
            },
            focusInput2(level2Index){
                this.focusLevle2Index = level2Index;
            },
            delLevel1Principal:function (event) {
                if (event.keyCode == 46 || event.keyCode == 8 && event.target.value == "") {
                    if (this.selected) {
                        this.principal="";
                        this.principalName="";
                    } else {
                        this.selected = true;
                    }
                }
            },
            initTrackInfo: function () {
                $("#level1Input").focus();
                var that = this;
                var id = $.wyui.page.urlParams.projectId;
                if(id != undefined){
                    that.showLevel2 = true;
                    that.showLevel3 = true;
                    that.id = id;
                    $.wyui.postMethod(urlConfig.pm.projectTrack.getLevel1Level2ProjectById, {
                        projectId : that.id
                    }, function (data) {
                        that.id = data.id;
                        that.projectName = data.projectName;
                        that.principal = data.principal;
                        that.principalName = data.principalName;
                        that.projectSn = data.projectSn;
                        that.levelProjectList = data.levelProjectList;
                        setTimeout(function () {
                            initAutoComplete();
                        }, 300);
                    });
                }

            },
            addRow:function(){                
                var focusIndex = this.focusLevle2Index ==-1 ? this.levelProjectList.length-1 : this.focusLevle2Index;
                var o=new Object();
                o.projectName="";
                o.id="";
                o.principal="";
                o.principalName="";
                o.selected=false;
                o.sortNo=this.levelProjectList.length;
                o.changed=false;
                o.level3List = [{id:"",projectName:"", principal:"", principalName:"",selected:false,sortNo:0,changed:false},
                        {id:"",projectName:"", principal:"", principalName:"",selected:false,sortNo:1,changed:false}];
                this.levelProjectList.splice(focusIndex+1,0,o);
                setTimeout(function () {
                    initAutoComplete();
                    $(".input2").eq(focusIndex+1).focus();
                }, 300);
                this.levelProjectList.forEach((element,i) => {
                    element.sortNo = i;
                });
            },
            delRow:function(){
                if(this.levelProjectList.length == 1){
                    alert("至少有一个二级项目");
                    return false;
                }

                this.focusLevle2Index = this.levelProjectList.length<this.focusLevle2Index?this.levelProjectList.length:this.focusLevle2Index;
                var focus2Index = this.focusLevle2Index;
                var focusId = this.levelProjectList[focus2Index].id;
                if(focusId != "")
                    this.delIds = this.delIds + this.levelProjectList[focus2Index].id+',';

                this.levelProjectList.splice(focus2Index, 1);
                $(".input2").eq(focus2Index>this.levelProjectList.length-1?this.levelProjectList.length-1:focus2Index).focus();
            },
            addLevel3Row:function(){
                var focus2Index = this.focusLevle2Index;
                var focus3Index = this.focusLevle3Index;
                var o=new Object();
                o.projectName="";
                o.id="";
                o.principal="";
                o.principalName="";
                o.selected=false;
                o.changed=false;
                o.sortNo=this.levelProjectList[focus2Index].level3List.length;
                this.levelProjectList[focus2Index].level3List.splice(focus3Index+1,0,o);
                setTimeout(function () {
                    initAutoComplete();
                    $(".input3" + focus2Index).eq(focus3Index+1).focus();
                }, 300);
                this.levelProjectList[focus2Index].level3List.forEach((element,i) => {
                    element.sortNo = i;
                });
            },
            delLevel3Row:function(){
                var focus2Index = this.focusLevle2Index;
                var level3List = this.levelProjectList[focus2Index].level3List;
                if(level3List.length == 1){
                    alert("至少有一个三级项目");
                    return false;
                }
                this.focusLevle3Index = this.focusLevle3Index==-1 ? this.focusLevle3Index.length-1 : this.focusLevle3Index;
                var focusIndex = this.focusLevle3Index;
                var focusId = level3List[focusIndex].id;
                if(focusId != "")
                    this.delIds = this.delIds + level3List[focusIndex].id+',';

                level3List.splice(focusIndex, 1);
                $(".input3"+focus2Index).eq(focusIndex>level3List.length-1?level3List.length-1:focusIndex).focus();
            },
            save:function(){
                var that =this;
                if(this.returnFlag)
                    return false;
                this.returnFlag = true;
                if($.trim(that.projectName)=="" ){
                    alert("请输入一级项目");
                    return false;                    
                }

                $.wyui.postMethod(urlConfig.pm.projectTrack.saveProjectOnwTwoThree, {
                    id : that.id,
                    proSn : that.projectSn,
                    userId : that.currentUser.id,
                    userName:that.currentUser.name,
                    projectName : that.projectName,
                    principal : that.principal,
                    principalName : that.principalName,
                    levelProjectList : that.levelProjectList,
                    delIds : that.delIds,
                    changed : that.changed,
                    sortNo : -1,
                }, function (data) {
                    parent.app.refresh();
                    location.href = 'addProject.html?projectId='+data.result;
                    // if(data.result == 1){
                    //     parent.app.refresh();
                    //     alert("保存成功");
                    //     //api.close();
                    // }else{
                    //     alert("保存失败");
                    // }

                    that.returnFlag = false;
                });
            }

        },
        mounted: function () {
            this.initTrackInfo();           
        }
    });
</script>
<script type="text/javascript">
$(function(){
    initAutoComplete = function(){
        $(".principal,.level3Principal,.level1Principal").autoComplete({
            url: server.ip + urlConfig.system.user.getTop10ByNameUser,
            render: function (users, panel) {
                for (var i = 0; i < users.length; i++) {
                    $("<li></li>").data("autoComplete",
                        users[i]).html("<a>" + users[i].name + "&nbsp;&nbsp;&nbsp;" +
                        "(" + "&nbsp;" + users[i].companyName + "-" + users[i].departName + "-" + users[i].roleName + "&nbsp;" + ") " + "</a>")
                        .appendTo(panel);
                }
            },
            selected: function (user) {
                if ($(this).hasClass("level3Principal")) {
                    var li = $(this).attr("data-liIndex");
                    var i = $(this).attr("data-index");
                    app.levelProjectList[li].level3List[i].principal = user.id;
                    app.levelProjectList[li].level3List[i].principalName = user.name;
                    app.levelProjectList[li].level3List[i].selected = false;
                    $(this).val("");
                }else if($(this).hasClass("principal")){
                    var i = $(this).attr("data-index");
                    app.levelProjectList[i].principal = user.id;
                    app.levelProjectList[i].principalName = user.name;
                    app.levelProjectList[i].selected = false;
                    $(this).val("");
                }else if($(this).hasClass("level1Principal")){
                    app.principal = user.id;
                    app.principalName = user.name;
                    app.selected = false;
                    $(this).val("");
                }
                return false;
            },
            height: 150,
            width: 290
        });
    }
    initAutoComplete();

    $(window).resize(function(){
        resizeStyle();
    });

    $(window).load(function(){
        resizeStyle();
    });

    resizeStyle = function(){
        $("#app").css("width",$("body").width());
        $("#app").css("height",$(document).height()-34);
    }

});
</script>
</body>
</html>